<template>
  <div>
    <DocHeader :title="data.title" fromDoc="hospitalizationNotice" />
    <div class="docMain">
      2、由于患者在住院期间外出，原有治疗将中断，配置好的药物将浪费，已经取得的治疗效果可能丧失。<br />
      3、患者在住院期间外出，患者的病情可能随时发生变化而不能得到及时的诊治。<br />
      4、患者可能因外出而丧失最佳的诊断和治疗疾病的时机。<br />
      5、患者在住院期间外出，可能出现其他无法预计的意外发生。<br />
      6、患者离院24小时且无法取得联系被视为患方同意与院方解除医疗服务合同关系，院方可对患者按自动出院处理。<br />
      7、患者离院时间按患方在离院告知记录签字时间起为准。
      <div style="text-indent: 2em">
        鉴于上述原因，医护人员希望患者住院期间安心治病，不要离院外出，请患者自觉遵守医院的规定。
        <span style="font-weight: bold"
          >如果特殊情况，患者要离院外出，需经过主管医生病情评估后签署《离院再告知书》。除上述情况外，院外发生的以下情况也后果自负:</span
        >
      </div>
      (1)未遵医嘱，私自服用、涂用、注射药物;<br />
      (2)殴斗、酗酒、自杀、被杀害或伤害、故意自伤及服用、吸食、注射毒品;<br />
      (3)受酒精、毒品、管制药品的影响;<br />
      (4)外出期间在其他医疗机构因诊疗行为产生的后果;<br />
      (5)发生精神错乱或精神失常;<br />
      (6)交通事故;<br />
      (7)进行高风险运动和活动异常导致的意外伤害或疾病加重;<br />
      (8)离院期间抽烟、暴饮暴食、熬夜等行为致病情加重或致残;<br />
      (9)其他影响病情的行为及意外伤害;<br />
      (10)离院期间将贵重物品及现金留在病房遗失。
    </div>
    <div class="flexBox">
      <div class="item">患者（家属）签名：</div>
      <div class="item">与患者的关系：</div>
    </div>
    <div class="flexBox">
      <div class="item">
        护士签名：
        <img
          v-if="signPhoto(sign, 'nursingDocument', data.type)"
          :src="
            'data:image/png;base64,' +
            signPhoto(sign, 'nursingDocument', data.type)
          "
          alt=""
          style="display: block; max-width: 98%; height: 24px"
          @click="handleSignImgClear"
        />
        <el-input
          v-else
          v-model="sign"
          style="width: 100px"
          @blur="handleSignInputBlur"
        ></el-input>
      </div>
      <div class="item">
        告知时间：
        <DateSelection
          v-model="time"
          value-format="yyyy-MM-dd HH:mm"
          :simple-op="true"
          :date-picker-show="true"
          :date-show="true"
          :no-clear="true"
          :hasBorder="false"
          :needTimeIcon="false"
          :display-num="!time"
          style="padding: 0"
        />
      </div>
    </div>
    <div class="flexBox">
      <div class="item"></div>
    </div>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash-unified'
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  toRefs,
  watch
} from 'vue'

import DateSelection from '@/components/DateSelection/indexV2.vue'
import { useSign } from '@/hooks'
import { getStoreFromInstance } from '@/utils/instance'

import DocHeader from '../DocHeader.vue'
import { baseData } from './baseData.js'

export default defineComponent({
  components: {
    DocHeader,
    DateSelection
  },
  props: {
    patCur: {
      type: Object,
      default: () => ({})
    },
    data: {
      type: Object,
      default: () => ({})
    },
    title: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const state = reactive({
      hospitalName: window.hospitalName,
      pageData: cloneDeep(baseData),
      sign: '',
      time: +new Date()
    })
    const store = getStoreFromInstance()

    const { signPhoto, queryUserSignByName } = useSign()

    const user = computed(() => store.getters.user)

    function handleSignInputBlur() {
      queryUserSignByName([state.sign], 'nursingDocument', props.data.type)
    }

    function handleSignImgClear() {
      state.sign = ''
    }

    function initData() {
      if (props.data.jsonText && props.data.jsonText !== '{}') {
        const jsonText = JSON.parse(props.data.jsonText)
        state.pageData = Object.assign(cloneDeep(baseData), jsonText)
      } else {
        nextTick(() => {
          state.pageData = cloneDeep(baseData)
        })
      }
    }

    watch(
      user,
      val => {
        if (val) {
          queryUserSignByName([val.name], 'nursingDocument', props.data.type)
          state.sign = val.name
        }
      },
      {
        immediate: true
      }
    )

    onMounted(() => {
      initData()
    })

    return {
      ...toRefs(state),
      signPhoto,
      handleSignInputBlur,
      handleSignImgClear
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';
@import '@/views/doc/styles/doc-fix.scss';
$border: 1px solid #000;

.docMain {
  line-height: 2em;
  margin-top: 10px;

  input {
    appearance: none;
    border: none;
    outline: none;
    border-bottom: 1px solid #000;
  }

  .checkBoxItem {
    display: flex;
    align-items: center;
  }

  .checkBox {
    width: 14px;
    height: 14px;
    margin-right: 5px;
    border: 1px solid #000;
  }
}

.textIndent2 {
  text-indent: 2em;
}

.flexBox {
  display: flex;
  margin-top: 60px;

  .item {
    width: 50%;
    display: flex;
    align-items: center;
  }
}

.title2 {
  text-align: center;
  font-size: 16px;
  margin-bottom: 10px;
  margin-top: 30px;
}

::v-deep {
  .el-input .el-input__inner {
    border: none;
    border-radius: 0;
    text-align: left;
    padding: 0 4px;
    color: #000;
  }
}
</style>
